<div id="bg"><img width="100%" height="100%" src="<?php echo Yii::app()->request->baseUrl; ?>/icon/bandochau.png" /></div> 
<style>
    div#bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;}  
</style>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<style type="text/css">
    a{color: rgb(158, 139, 139);text-decoration: none;position: relative;}
    * {
        margin: 0;
        padding: 0;
    }

    #clock {
        position: relative;
        width: 491px;
        height: 491px;
        margin: 40px auto 0 auto;

        //background: url(images/dongho240.png);
        list-style: none;
    }

    #sec, #min, #hour {
        position: absolute;
        width: 25px;
        height: 491px;
        top: 0px;
        left: 230px;
    }

    #sec {
        background: url(images/sechand.png);
        z-index: 3;
    }

    #min {
        background: url(images/minhand.png);
        z-index: 2;
    }

    #hour {
        background: url(images/hourhand.png);
        z-index: 1;
    }

    p {
        text-align: center; 
        padding: 10px 0 0 0;
    }
</style>

<script type="text/javascript">

    $(document).ready(function() {

        setInterval(function() {
            var seconds = new Date().getSeconds();
            var sdegree = seconds * 6;
            var srotate = "rotate(" + sdegree + "deg)";

            $("#sec").css({"-moz-transform": srotate, "-webkit-transform": srotate});

        }, 1000);


        setInterval(function() {
            var hours = new Date().getHours();
            var mins = new Date().getMinutes();
            var hdegree = hours * 30 + (mins / 2);
            var hrotate = "rotate(" + hdegree + "deg)";

            $("#hour").css({"-moz-transform": hrotate, "-webkit-transform": hrotate});

        }, 1000);


        setInterval(function() {
            var mins = new Date().getMinutes();
            var mdegree = mins * 6;
            var mrotate = "rotate(" + mdegree + "deg)";

            $("#min").css({"-moz-transform": mrotate, "-webkit-transform": mrotate});

        }, 1000);


        setInterval(function() {
            timedText();
        }, 1000);
    });

</script>

<script>
    function timedText()
    {
        var hours = new Date().getHours();
        var mins = new Date().getMinutes();
        var b;
    
        //alert(hours);
        if (hours < 2) {
            
            var c9 = document.getElementById("c1");
            var c27 = document.getElementById("c13");
            var c57 = document.getElementById("c34");
            var c58 = document.getElementById("c35");
            var c36 = document.getElementById("c36");
            var c28 = document.getElementById("c14");
            if (mins <= 10){
                c9.style.color = 'white';
                var c2 = document.getElementById("c33");
                c2.style.color='rgb(158, 139, 139)';
            }
            else if (mins <= 20) {
                c9.style.color = 'rgb(158, 139, 139)';
                c27.style.color = 'white';
            }else if(mins <=30){
                c27.style.color = 'rgb(158, 139, 139)';
                c57.style.color = 'white';
            }else if(mins <=40){
                c57.style.color = 'rgb(158, 139, 139)';
                c58.style.color = 'white';
            }
            else if(mins <=50){
                c58.style.color = 'rgb(158, 139, 139)';
                c36.style.color = 'white';
            }else{
                c36.style.color = 'rgb(158, 139, 139)';
                c28.style.color = 'white';
            }
        }else if (hours <3) {
            
            var c9 = document.getElementById("c2");
            var c27 = document.getElementById("c15");
            var c57 = document.getElementById("c37");
            var c58 = document.getElementById("c38");
            var c28 = document.getElementById("c16");
            if (mins <= 12){
                c9.style.color = 'white';
                var c2 = document.getElementById("c14");
                c2.style.color='rgb(158, 139, 139)';
            }
            else if (mins <= 24) {
                c9.style.color = 'rgb(158, 139, 139)';
                c27.style.color = 'white';
            }else if(mins <=36){
                c27.style.color = 'rgb(158, 139, 139)';
                c57.style.color = 'white';
            }else if(mins <=48){
                c57.style.color = 'rgb(158, 139, 139)';
                c58.style.color = 'white';
            }
            else if(mins <=59){
                c58.style.color = 'rgb(158, 139, 139)';
                c28.style.color = 'white';
            }
        }else if (hours <4) {
            
            var c9 = document.getElementById("c3");
            var c27 = document.getElementById("c17");
            var c57 = document.getElementById("c39");
            var c58 = document.getElementById("c40");
            var c28 = document.getElementById("c41");
            if (mins <= 12){
                c9.style.color = 'white';
                var c2 = document.getElementById("c16");
                c2.style.color='rgb(158, 139, 139)';
            }
            else if (mins <= 24) {
                c9.style.color = 'rgb(158, 139, 139)';
                c27.style.color = 'white';
            }else if(mins <=36){
                c27.style.color = 'rgb(158, 139, 139)';
                c57.style.color = 'white';
            }else if(mins <=48){
                c57.style.color = 'rgb(158, 139, 139)';
                c58.style.color = 'white';
            }
            else if(mins <=59){
                c58.style.color = 'rgb(158, 139, 139)';
                c28.style.color = 'white';
            }
        }else if (hours <5) {
            
            var c9 = document.getElementById("c4");
            var c27 = document.getElementById("c18");
            var c57 = document.getElementById("c19");
            var c58 = document.getElementById("c42");
            var c28 = document.getElementById("c43");
            if (mins <= 12){
                c9.style.color = 'white';
                var c2 = document.getElementById("c41");
                c2.style.color='rgb(158, 139, 139)';
            }
            else if (mins <= 24) {
                c9.style.color = 'rgb(158, 139, 139)';
                c27.style.color = 'white';
            }else if(mins <=36){
                c27.style.color = 'rgb(158, 139, 139)';
                c57.style.color = 'white';
            }else if(mins <=48){
                c57.style.color = 'rgb(158, 139, 139)';
                c58.style.color = 'white';
            }
            else if(mins <=59){
                c58.style.color = 'rgb(158, 139, 139)';
                c28.style.color = 'white';
            }
        }else if (hours <6) {
            
            var c9 = document.getElementById("c5");
            var c27 = document.getElementById("c20");
            var c57 = document.getElementById("c44");
            var c58 = document.getElementById("c45");
            var c28 = document.getElementById("c46");
            if (mins <= 12){
                c9.style.color = 'white';
                var c2 = document.getElementById("c43");
                c2.style.color='rgb(158, 139, 139)';
            }
            else if (mins <= 24) {
                c9.style.color = 'rgb(158, 139, 139)';
                c27.style.color = 'white';
            }else if(mins <=36){
                c27.style.color = 'rgb(158, 139, 139)';
                c57.style.color = 'white';
            }else if(mins <=48){
                c57.style.color = 'rgb(158, 139, 139)';
                c58.style.color = 'white';
            }
            else if(mins <=59){
                c58.style.color = 'rgb(158, 139, 139)';
                c28.style.color = 'white';
            }
        }else if (hours <7) {
            
            var c9 = document.getElementById("c6");
            var c27 = document.getElementById("c21");
            var c57 = document.getElementById("c22");
            var c58 = document.getElementById("c47");
            var c28 = document.getElementById("c48");
            var c49 = document.getElementById("c49");
            if (mins <= 10){
                c9.style.color = 'white';
                var c2 = document.getElementById("c43");
                c2.style.color='rgb(158, 139, 139)';
            }
            else if (mins <= 20) {
                c9.style.color = 'rgb(158, 139, 139)';
                c27.style.color = 'white';
            }else if(mins <=30){
                c27.style.color = 'rgb(158, 139, 139)';
                c57.style.color = 'white';
            }else if(mins <=40){
                c57.style.color = 'rgb(158, 139, 139)';
                c58.style.color = 'white';
            }
            else if(mins <=50){
                c58.style.color = 'rgb(158, 139, 139)';
                c28.style.color = 'white';
            }else{
                c28.style.color = 'rgb(158, 139, 139)';
                c49.style.color = 'white';
            }
        }else if (hours <8) {
            
            var c9 = document.getElementById("c7");
            var c27 = document.getElementById("c23");
            var c24 = document.getElementById("c24");
            var c57 = document.getElementById("c40");
            var c58 = document.getElementById("c51");
            var c28 = document.getElementById("c52");
            if (mins <= 10){
                c9.style.color = 'white';
                var c2 = document.getElementById("c49");
                c2.style.color='rgb(158, 139, 139)';
            }
            else if (mins <= 20) {
                c9.style.color = 'rgb(158, 139, 139)';
                c27.style.color = 'white';
            }else if(mins <=30){
                c27.style.color = 'rgb(158, 139, 139)';
                c24.style.color = 'white';
            }else if(mins <=40){
                c24.style.color = 'rgb(158, 139, 139)';
                c57.style.color = 'white';
            }
            else if(mins <=50){
                c57.style.color = 'rgb(158, 139, 139)';
                c58.style.color = 'white';
            }else{
                c58.style.color = 'rgb(158, 139, 139)';
                c28.style.color = 'white';
            }
        }else if (hours <9) {
            
            var c9 = document.getElementById("c8");
            var c27 = document.getElementById("c25");
            var c57 = document.getElementById("c26");
            var c58 = document.getElementById("c53");
            var c28 = document.getElementById("c54");
            var c55 = document.getElementById("c55");
            if (mins <= 10){
                c9.style.color = 'white';
                var c2 = document.getElementById("c52");
                c2.style.color='rgb(158, 139, 139)';
            }
            else if (mins <= 20) {
                c9.style.color = 'rgb(158, 139, 139)';
                c27.style.color = 'white';
            }else if(mins <=30){
                c27.style.color = 'rgb(158, 139, 139)';
                c57.style.color = 'white';
            }else if(mins <=40){
                c57.style.color = 'rgb(158, 139, 139)';
                c58.style.color = 'white';
            }
            else if(mins <=50){
                c58.style.color = 'rgb(158, 139, 139)';
                c28.style.color = 'white';
            }else{
                 c28.style.color = 'rgb(158, 139, 139)';
                c55.style.color = 'white';
            }
        }else if (hours < 10) {
            //alert('so 9');
            var c9 = document.getElementById("c9");
            var c27 = document.getElementById("c27");
            var c56 = document.getElementById("c56");
            var c57 = document.getElementById("c57");
            var c58 = document.getElementById("c58");
            var c28 = document.getElementById("c28");
            if (mins <= 10){
                c9.style.color = 'white';
                var c2 = document.getElementById("c55");
                c2.style.color='rgb(158, 139, 139)';
            }
            else if (mins <= 20) {
                c9.style.color = 'rgb(158, 139, 139)';
                c27.style.color = 'white';
            }else if(mins <=30){
                c27.style.color = 'rgb(158, 139, 139)';
                c56.style.color = 'white';
            }else if(mins <=40){
                c56.style.color = 'rgb(158, 139, 139)';
                c57.style.color = 'white';
            }
            else if(mins <=50){
                c57.style.color = 'rgb(158, 139, 139)';
                c58.style.color = 'white';
            }
            else{
                c58.style.color = 'rgb(158, 139, 139)';
                c28.style.color = 'white';
            }
        }else if(hours < 11) {
            
            var c10 = document.getElementById("c10");
            var c59 = document.getElementById("c59");
            var c60 = document.getElementById("c60");
            var c61 = document.getElementById("c61");
            var c29 = document.getElementById("c29");
            if (mins <= 12){
                c10.style.color = 'white';
                var c2 = document.getElementById("c28");
                c2.style.color='rgb(158, 139, 139)';
            }
            else if (mins <= 24) {
                c10.style.color = 'rgb(158, 139, 139)';
                c59.style.color = 'white';
            }else if(mins <=36){
                c59.style.color = 'rgb(158, 139, 139)';
                c60.style.color = 'white';
            }else if(mins <=48){
                c60.style.color = 'rgb(158, 139, 139)';
                c61.style.color = 'white';
            }
            else if(mins <=59){
                c61.style.color = 'rgb(158, 139, 139)';
                c29.style.color = 'white';
            }
        }else if (hours < 12) {
            
            var c9 = document.getElementById("c11");
            var c27 = document.getElementById("c30");
            var c57 = document.getElementById("c62");
            var c58 = document.getElementById("c63");
            var c28 = document.getElementById("c31");
            if (mins <= 12){
                c9.style.color = 'white';
                var c2 = document.getElementById("c29");
                c2.style.color='rgb(158, 139, 139)';
            }
            else if (mins <= 24) {
                c9.style.color = 'rgb(158, 139, 139)';
                c27.style.color = 'white';
            }else if(mins <=36){
                c27.style.color = 'rgb(158, 139, 139)';
                c57.style.color = 'white';
            }else if(mins <=48){
                c57.style.color = 'rgb(158, 139, 139)';
                c58.style.color = 'white';
            }
            else if(mins <=59){
                c58.style.color = 'rgb(158, 139, 139)';
                c28.style.color = 'white';
            }
        }else if (hours > 11) {
            
            var c9 = document.getElementById("c12");
            var c27 = document.getElementById("c32");
            var c57 = document.getElementById("c64");
            var c58 = document.getElementById("c65");
            var c28 = document.getElementById("c33");
            if (mins <= 12){
                c9.style.color = 'white';
                var c2 = document.getElementById("c31");
                c2.style.color='rgb(158, 139, 139)';
            }
            else if (mins <= 24) {
                c9.style.color = 'rgb(158, 139, 139)';
                c27.style.color = 'white';
            }else if(mins <=36){
                c27.style.color = 'rgb(158, 139, 139)';
                c57.style.color = 'white';
            }else if(mins <=48){
                c57.style.color = 'rgb(158, 139, 139)';
                c58.style.color = 'white';
            }
            else if(mins <=59){
                c58.style.color = 'rgb(158, 139, 139)';
                c28.style.color = 'white';
            }
        }

    }
</script>

<div style=" margin-left: 20px; width: 200px; margin-top: 50px">
    <div id='cssmenu'>
        <ul>
            <li class='active '><a href='<?php echo Yii::app()->request->baseUrl; ?>/trang-chu'><span>Trang chủ</span></a></li>
            <li><a href='#'><span>Giới thiệu</span></a></li>
            <li><a href='#'><span>Tư vấn</span></a></li>
            <li><a href='#'><span>Dịch vụ</span></a></li>
            <li class='has-sub'><a href='#'><span>Tố tụng</span></a>
                <ul>
                    <li><a href='#'><span>Tố tụng tòa án</span></a></li>   
                    <li><a href='#'><span>Tố tụng trọng tài</span></a></li>  
                </ul>
            </li>
            <li class='has-sub'><a href='#'><span>Liên hệ</span></a>
                <ul>
                    <li><a href='#'><span>Đăng tin luật sư</span></a></li>   
                    <li><a href='#'><span>Quảng cáo</span></a></li>  
                </ul>
            </li>
        </ul>
    </div>

    <div style="clear:both; margin: 0 0 30px 0;">&nbsp;</div>
</div>
<div style=" overflow: hidden;margin-top: -260px">
    <ul id="clock">	
        <li id="sec"></li>
        <li id="hour"></li>
        <li id="min"></li>
    </ul>
    <div style=" width: 491px;height: 491px;margin: 20px auto 0 auto; z-index: 10;">


        <div  style="margin-top: -354px;margin-left: 280px; font-size: 15pt">
            <a id="c1" href="#" title="An Giang">1</a>
        </div>
        <div  style="margin-left: 315px;margin-top: 10px;font-size: 15pt">
            <a id="c2" href="#" title="Bà Rịa-Vũng Tàu" >2</a>
        </div>
        <div  style="margin-left: 328px;margin-top: 20px;font-size: 15pt">
            <a id="c3" href="#" title="Bạc Liêu">3</a>
        </div>
        <div  style="margin-left: 315px;margin-top: 24px;font-size: 15pt">
            <a id="c4" href="#" title="Bắc Kạn">4</a>
        </div>
        <div  style="margin-left: 283px;margin-top: 8px;font-size: 15pt">
            <a id="c5" href="#" title="Bắc Giang">5</a>
        </div>
        <div  style="margin-left: 238px;margin-top: -11px;font-size: 15pt">
            <a id="c6" href="#" title="Bắc Ninh">6</a>
        </div>
        <div style="clear: both"></div>
        <div  style="margin-top: -200px;margin-left: 233px; font-size: 15pt">
            <a id="c12" href="#" title="Cà Mau">12</a>
        </div>
        <div  style="margin-left: 196px;margin-top: -13px;font-size: 15pt">
            <a id="c11" href="#" title="Bình Thuận">11</a>
        </div>
        <div  style="margin-left: 161px;margin-top: 11px;font-size: 15pt">
            <a id="c10" href="#" title="Bình Phước">10</a>
        </div>
        <div  style="margin-left: 148px;margin-top: 20px;font-size: 15pt">
            <a id="c9" href="#" title="Bình Định">9</a>
        </div>
        <div  style="margin-left: 162px;margin-top: 24px;font-size: 15pt">
            <a id="c8" href="#" title="Bình Dương">8</a>
        </div>
        <div  style="margin-left: 195px;margin-top: 8px;font-size: 15pt">
            <a id="c7" href="#" title="Bến Tre">7</a>
        </div>

    </div>



    <div style=" width: 491px;height: 491px;margin: 20px auto 0 auto;z-index: 13; margin-top: -650px;">
        <div  style="margin-top: 85px;margin-left: 278px; font-size: 15pt">
            <a id="c13" href="#" title="Cao Bằng">13</a>
        </div>
        <div  style="margin-left: 322px;margin-top: 0px;font-size: 15pt">
            <a id="c14" href="#" title="TP. Cần Thơ">14</a>
        </div>
        <div  style="margin-left: 357px;margin-top: 15px;font-size: 15pt">
            <a id="c15" href="#" title="TP. Đà Nẵng">15</a>
        </div>
        <div  style="margin-left: 380px;margin-top: 22px;font-size: 15pt">
            <a id="c16" href="#" title="Đắk Lắk">16</a>
        </div>
        <div  style="margin-left: 390px;margin-top: 20px;font-size: 15pt">
            <a id="c17" href="#" title="Đắk Nông">17</a>
        </div>
        <div  style="margin-left: 380px;margin-top: 27px;font-size: 15pt">
            <a id="c18" href="#" title="Điện Biên">18</a>
        </div>

        <div  style="margin-left: 359px;margin-top: 20px;font-size: 15pt">
            <a id="c19" href="#" title="Đồng Nai">19</a>
        </div>
        <div style="margin-left: 320px;margin-top: 15px;font-size: 15pt">
            <a id="c20"  href="#" title="Đồng Tháp">20</a>
        </div>
        <div  style="margin-left: 280px;margin-top: -2px;font-size: 15pt">
            <a id="c21" href="#" title="Gia Lai">21</a>
        </div>
        <div  style="margin-left: 234px;margin-top: -15px;font-size: 15pt">
            <a id="c22" href="#" title="Hà Giang">22</a>
        </div>


        <div style="clear: both"></div>
        <div  style="margin-top: -341px;margin-left: 233px; font-size: 15pt">
            <a id="c32" href="#" title="Hưng Yên">32</a>
        </div>
        <div  style="margin-left: 192px;margin-top: -15px;font-size: 15pt">
            <a id="c31" href="#" title="Hậu Giang">31</a>
        </div>
        <div  style="margin-left: 146px;margin-top: -1px;font-size: 15pt">
            <a id="c30" href="#" title="TP. Hồ Chí Minh ">30</a>
        </div>
        <div  style="margin-left: 111px;margin-top: 12px;font-size: 15pt">
            <a id="c29" href="#" title="Hòa Bình">29</a>
        </div>
        <div  style="margin-left: 85px;margin-top: 24px;font-size: 15pt">
            <a id="c28" href="#" title="TP. Hải Phòng ">28</a>
        </div>
        <div  style="margin-left: 78px;margin-top: 22px;font-size: 15pt">
            <a id="c27" href="#" title="Hải Dương">27</a>
        </div>
        <div  style="margin-left: 87px;margin-top: 25px;font-size: 15pt">
            <a id="c26" href="#" title="Hà Tĩnh">26</a>
        </div>
        <div  style="margin-left: 111px;margin-top: 23px;font-size: 15pt">
            <a id="c25" href="#" title="Hà Tây">25</a>
        </div>
        <div  style="margin-left: 148px;margin-top: 16px;font-size: 15pt">
            <a id="c24" href="#" title="TP. Hà Nội ">24</a>
        </div>
        <div  style="margin-left: 186px;margin-top: -5px;font-size: 15pt">
            <a id="c23" href="#" title="Hà Nam">23</a>
        </div>
    </div>


    <div style=" width: 491px;height: 491px;margin: 20px auto 0 auto;z-index: 15;  margin-top: -576px">
        <div  style="margin-top: 14px;margin-left: 282px; font-size: 15pt">
            <a id="c33" href="#" title="Khánh Hòa">33</a>
        </div>
        <div  style="margin-left: 324px;margin-top: -8px;font-size: 15pt">
            <a id="c34" href="#" title="Kiên Giang">34</a>
        </div>
        <div  style="margin-left: 361px;margin-top: 0px;font-size: 15pt">
            <a id="c35" href="#" title="Kon Tum">35</a>
        </div>
        <div  style="margin-left: 399px;margin-top: 7px;font-size: 15pt">
            <a id="c36" href="#" title="Lai Châu">36</a>
        </div>
        <div  style="margin-left: 423px;margin-top: 13px;font-size: 15pt">
            <a id="c37" href="#" title="Lào Cai">37</a>
        </div>
        <div  style="margin-left: 445px;margin-top: 16px;font-size: 15pt">
            <a id="c38" href="#" title="Lạng Sơn">38</a>
        </div>

        <div  style="margin-left: 455px;margin-top: 17px;font-size: 15pt">
            <a id="c39" href="#" title="Lâm Đồng">39</a>
        </div>
        <div  style="margin-left: 458px;margin-top: 15px;font-size: 15pt">
            <a id="c40" href="#" title="Long An">40</a>
        </div>
        <div  style="margin-left: 455px;margin-top: 21px;font-size: 15pt">
            <a id="c41" href="#" title="Nam Định">41</a>
        </div>
        <div  style="margin-left: 441px;margin-top: 17px;font-size: 15pt">
            <a id="c42" href="#" title="Nghệ An">42</a>
        </div>
        <div  style="margin-left: 422px;margin-top: 17px;font-size: 15pt">
            <a id="c43" href="#" title="Ninh Bình">43</a>
        </div>
        <div  style="margin-left: 392px;margin-top: 14px;font-size: 15pt">
            <a id="c44" href="#" title="Ninh Thuận">44</a>
        </div>
        <div  style="margin-left: 361px;margin-top: 1px;font-size: 15pt">
            <a id="c45" href="#" title="Phú Thọ">45</a>
        </div>
        <div  style="margin-left: 327px;margin-top: -1px;font-size: 15pt">
            <a id="c46" href="#" title="Phú Yên">46</a>
        </div>
        <div  style="margin-left: 284px;margin-top: -8px;font-size: 15pt">
            <a id="c47" href="#" title="Quảng Bình">47</a>
        </div>

        <div style="clear: both"></div>
        <div  style="margin-top: -472px;margin-left: 244px; font-size: 15pt">
            <a id="c65" href="#" title="Nước Ngoài">65</a>
        </div>
        <div  style="margin-left: 200px;margin-top: -20px;font-size: 15pt">
            <a id="c64" href="#" title="Yên Bái">64</a>
        </div>
        <div  style="margin-left: 156px;margin-top: -14px;font-size: 15pt">
            <a id="c63" href="#" title="Vĩnh Phúc">63</a>
        </div>
        <div  style="margin-left: 118px;margin-top: -4px;font-size: 15pt">
            <a id="c62" href="#" title="Vĩnh Long">62</a>
        </div>
        <div  style="margin-left: 87px;margin-top: 3px;font-size: 15pt">
            <a id="c61" href="#" title="Tuyên Quang">61</a>
        </div>
        <div  style="margin-left: 58px;margin-top: 7px;font-size: 15pt">
            <a id="c60" href="#" title="Trà Vinh">60</a>
        </div>
        <div  style="margin-left: 34px;margin-top: 13px;font-size: 15pt">
            <a id="c59" href="#" title="Tiền Giang">59</a>
        </div>
        <div  style="margin-left: 17px;margin-top: 19px;font-size: 15pt">
            <a id="c58" href="#" title="Thừa Thiên - Huế">58</a>
        </div>
        <div  style="margin-left: 9px;margin-top: 16px;font-size: 15pt">
            <a id="c57" href="#" title="Thanh Hóa">57</a>
        </div>
        <div  style="margin-left: 9px;margin-top: 20px;font-size: 15pt">
            <a id="c56" href="#" title="Thái Nguyên">56</a>
        </div>

        <div  style="margin-left: 17px;margin-top: 22px;font-size: 15pt">
            <a id="c55" href="#" title="Thái Bình">55</a>
        </div>
        <div style="margin-left: 35px;margin-top: 16px;font-size: 15pt">
            <a id="c54"  href="#" title="Tây Ninh">54</a>
        </div>
        <div  style="margin-left: 59px;margin-top: 12px;font-size: 15pt">
            <a id="c53" href="#" title="Sơn La">53</a>
        </div>

        <div  style="margin-left: 91px;margin-top: 12px;font-size: 15pt">
            <a id="c52" href="#" title="Sóc Trăng">52</a>
        </div>
        <div  style="margin-left: 128px;margin-top: 5px;font-size: 15pt">
            <a id="c51" href="#" title="Quảng Trị">51</a>
        </div>
        <div  style="margin-left: 162px;margin-top: -9px;font-size: 15pt">
            <a id="c50" href="#" title="Quảng Ninh">50</a>
        </div>
        <div  style="margin-left: 197px;margin-top: -13px;font-size: 15pt">
            <a id="c49" href="#" title="Quảng Ngãi">49</a>
        </div>
        <div  style="margin-left: 241px;margin-top: -20px;font-size: 15pt">
            <a id="c48" href="#" title="Quảng Nam">48</a>
        </div>
    </div>

</div>
<style type="text/css">/* Some stylesheet reset */
    #cssmenu > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        vertical-align: baseline;
        line-height: 1;
    }

    /* The container */
    #cssmenu > ul {
        display: block;
        position: relative;
        width: 150px;
    }

    /* The list elements which contain the links */
    #cssmenu > ul li {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 150px;	
    }

    /* General link styling */
    #cssmenu > ul li a {
        /* Layout */
        display: block;
        position: relative;
        margin: 0;
        //border-top: 1px dotted #3a3a3a;
        //border-bottom: 1px dotted #1b1b1b;
        padding: 11px 20px;
        width: 140px;

        /* Typography */
        font-family: Helvetica, Arial, sans-serif;
        color: rgb(94, 87, 87);//#d8d8d8;
        text-decoration: none;
        text-transform: uppercase;
        //text-shadow: 0 1px 1px #000;
        font-size: 13px;
        font-weight: 300;


        /* Background & effects */
        //background: #d8d3bf;//#282828;
    }

    /* Rounded corners for the first link of the menu/submenus */
    #cssmenu > ul li:first-child>a {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-top: 0;
    }

    /* Rounded corners for the last link of the menu/submenus */
    #cssmenu > ul li:last-child>a {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom: 0;
    }


    /* The hover state of the menu/submenu links */
    #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
        color: #fff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
        //background: #f06343;
        //background: -webkit-linear-gradient(bottom, #f06343, #f27d63);
        //background: -ms-linear-gradient(bottom, #f06343, #f27d63); 
        //background: -moz-linear-gradient(bottom, #f06343, #f27d63);
        //background: -o-linear-gradient(bottom, #f06343, #f27d63);
        //border-color: transparent;
    }

    /* The arrow indicating a submenu */
    #cssmenu > ul .has-sub>a::after {
        content: '';
        position: absolute;
        top: 16px;
        right: 10px;
        width: 0px;
        height: 0px;

        /* Creating the arrow using borders */
        border: 4px solid transparent;
        //border-left: 4px solid #d8d8d8; 
    }

    /* The same arrow, but with a darker color, to create the shadow effect */
    #cssmenu > ul .has-sub>a::before {
        content: '';
        position: absolute;
        top: 17px;
        right: 10px;
        width: 0px;
        height: 0px;

        /* Creating the arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #000;
    }

    /* Changing the color of the arrow on hover */
    #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
        border-left: 4px solid #fff;
    }

    #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
        border-left: 4px solid rgba(0, 0, 0, .3);
    }


    /* THE SUBMENUS */
    #cssmenu > ul ul {
        position: absolute;
        left: 150px;
        top: -9999px;
        padding-left: 5px;
        opacity: 0;
        /* The fade effect, created using an opacity transition */
        -webkit-transition: opacity .3s ease-in;
        -moz-transition: opacity .3s ease-in;
        -o-transition: opacity .3s ease-in;
        -ms-transition: opacity .3s ease-in;
    }

    /* Showing the submenu when the user is hovering the parent link */
    #cssmenu > ul li:hover>ul {
        top: 0px;
        opacity: 1;
    }</style>

